<template>
  <el-card body-style="min-height: 86vh">
    <!-- 搜索 -->
    <el-form :inline="true" :model="searchForm" class="demo-form-inline">
      <el-form-item label="类别">
        <el-select v-model="searchForm.categoryId" filterable>
          <el-option
            v-for="item in serviceTypeList"
            :key="item.id"
            :label="item.categoryName"
            :value="item.id"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="名称">
        <el-input v-model="searchForm.productName" placeholder="请输入配件名称"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button @click="handleRestSearch()">重置</el-button>
        <el-button type="primary" @click="handleGetTableList()">搜索</el-button>
      </el-form-item>
    </el-form>
    <el-divider />
    <!-- 新增、筛选按钮 -->
    <div v-permission="['serve:accessory:add']" class="flex justify-between">
      <div class="flex">
        <el-button type="primary" @click="handleCreate()">新增</el-button>
        <el-button type="primary" @click="handleDownloadTemplate">下载模板</el-button>
        <el-upload
          class="ml-2"
          :show-file-list="false"
          accept=".xls,.xlsx"
          :http-request="handleChangeFile"
        >
          <el-button type="primary" :loading="isLoading">批量上传配件</el-button>
        </el-upload>
      </div>
      <div>
        <el-button circle @click="handleGetTableList()">
          <template #icon
            ><el-icon> <Refresh /> </el-icon
          ></template>
        </el-button>
      </div>
    </div>
    <!-- 表格 -->
    <el-table :data="tableData">
      <el-table-column prop="categoryName" label="类别" />
      <el-table-column prop="serialNumber" label="配件编号" />
      <el-table-column prop="productName" label="配件名称" />
      <el-table-column prop="saleAmount" label="售价">
        <template #default="{ row }"> ¥{{ row.saleAmount }} </template>
      </el-table-column>
      <el-table-column prop="unit" label="单位" />
      <el-table-column label="操作">
        <template #default="{ row }">
          <el-button type="primary" @click="handleEdit(row)">编辑</el-button>
          <el-popconfirm title="你确定要删除该配件?" @confirm="handleDelete({ id: row.id })">
            <template #reference>
              <el-button type="danger">删除</el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-pagination
      class="flex justify-center mt-2"
      background
      layout="total,prev, pager, next"
      :current-page="currentPage"
      :page-size="limit"
      :total="total"
      @current-change="handleGetTableList"
    />
    <form-drawer ref="formDrawerRef" @submit="handleSubmit">
      <el-form ref="formRef" :model="form" :rules="rules" label-width="120">
        <el-form-item label="配件类别" prop="categoryId">
          <el-select v-model="form.categoryId" filterable>
            <el-option
              v-for="item in serviceTypeList"
              :key="item.id"
              :label="item.categoryName"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="配件编号" prop="serialNumber">
          <el-input v-model="form.serialNumber" placeholder="请输入配件编号"></el-input>
        </el-form-item>
        <el-form-item label="配件名称" prop="productName">
          <el-input v-model="form.productName" placeholder="请输入配件名称"></el-input>
        </el-form-item>
        <el-form-item label="配件售价" prop="saleAmount">
          <el-input
            v-model="form.saleAmount"
            v-number
            type="number"
            :min="1"
            placeholder="请输入配件售价"
          >
            <template #append>元</template>
          </el-input>
        </el-form-item>
        <el-form-item label="配件单位" prop="unit">
          <el-select v-model="form.unitId" filterable>
            <el-option
              v-for="item in unitList"
              :key="item.id"
              :label="item.unit"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form>
    </form-drawer>
  </el-card>
</template>
<script setup lang="ts">
import { ref, onMounted } from "vue";
import { useInitTable, useInitForm } from "@/hooks/useCommon";
import useExcel from "@/hooks/useExcel";
import FormDrawer from "@/components/FormDrawer.vue";
import { toast } from "@/utils/index";
import {
  getServiceTypeListApi,
  getPartsPageApi,
  addPartsApi,
  editPartsApi,
  deletePartsApi,
  getPartsUnitListApi
} from "@/api/repair";

// 表格
const {
  searchForm,
  tableData,
  currentPage,
  limit,
  total,
  handleRestSearch,
  handleGetTableList,
  handleDelete
} = useInitTable({
  searchForm: {
    categoryId: "",
    productName: ""
  },
  getTableList: getPartsPageApi,
  deleteData: deletePartsApi
});

// 新增编辑
const { formDrawerRef, formRef, form, rules, handleCreate, handleEdit, handleSubmit } = useInitForm(
  {
    form: {
      categoryId: "",
      serialNumber: "",
      productName: "",
      saleAmount: "",
      unitId: ""
    },
    rules: {
      categoryId: [{ required: true, message: "请选择配件类别", trigger: "change" }],
      serialNumber: [{ required: true, message: "请输入配件编号", trigger: "blur" }],
      productName: [{ required: true, message: "请输入配件名称", trigger: "blur" }],
      saleAmount: [{ required: true, message: "请输入配件售价", trigger: "blur" }]
    },
    createData: addPartsApi,
    updateData: editPartsApi,
    success: () => {
      handleGetTableList(currentPage.value);
    }
  }
);
const { downloadExcel, uploadExcel } = useExcel();
// 下载模板
const handleDownloadTemplate = () => {
  downloadExcel("配件模板", [["类别", "配件编号", "配件名称", "售价", "单位"]], "配件模板");
};
// 批量导入
const isLoading = ref(false);
const handleChangeFile = async (e: any) => {
  isLoading.value = true;
  try {
    const files = e.file;
    await uploadExcel(files, {
      类别: "categoryName",
      配件编号: "serialNumber",
      配件名称: "productName",
      售价: "saleAmount",
      单位: "unit"
    });
    toast("上传成功！");
  } finally {
    isLoading.value = false;
  }
};

// 获取项目分类列表
const serviceTypeList: any = ref([]);
const handleGetProjetType = async () => {
  const res = await getServiceTypeListApi();
  serviceTypeList.value = res as any;
};
// 获取配件单位列表
const unitList: any = ref([]);
const handleGetUnitList = async () => {
  const res = await getPartsUnitListApi();
  unitList.value = res as any;
};

onMounted(async () => {
  handleGetProjetType();
  handleGetUnitList();
});
</script>
<style scoped lang="scss">
.demo-form-inline .el-input {
  --el-input-width: 220px;
}

.demo-form-inline .el-select {
  --el-select-width: 220px;
}
</style>
